<!--KLC-->
<template>
  <scroller class="scroller bg1" @viewappear="viewappear">

    <template v-if="data">
        <div class="cell" :style="{'background-image': 'linear-gradient(to right, #01347B, #2953B9)'}">

          <div class="tag" :style="{'background-image': 'linear-gradient(to right, #1677FE, #6F9AFF)'}">
            <text class="font20 text1">{{T('初级认证')}}</text>
          </div> 

          <div class="all"></div>
          <div class="cell-top">
            <LImage class="img-head" :src="Config.img('chuji_icon.png')"></LImage>
            <div class="column all">
              <text class="font32 text1 mb4">{{T('基础认证')}}</text>
              <text class="font24 text-hui">{{data.certContent.juniorCert}}</text>
            </div>
          </div>
          <div class="line"></div>

          <div class="cell-bottom">
            <text class="font24 text-hui all mb4">{{T('条件：提供个人信息')}}</text>
            <div v-if="data.juniorCert" class="but">
              <text class="font26 text1">{{T('已认证')}}</text>
            </div>
            <div v-else class="but" @click="cjClick">
              <text class="font26 text1">{{T('去认证')}}</text>
              <LImage class="img-arrow" :src="Config.img('jiantou_hui.png')"></LImage>
            </div>
          </div>
        </div>

        <div class="cell" :style="{'background-image': 'linear-gradient(to right, #3F4B6E, #3B4669)'}">

          <div class="tag" :style="{'background-image': 'linear-gradient(to right, #6E83B3, #BFCEF2)'}">
            <text class="font20 text1">{{T('中级认证')}}</text>
          </div> 

          <div class="all"></div>
          <div class="cell-top">
            <LImage class="img-head" :src="Config.img('zhongji_icon.png')"></LImage>
            <div class="column all">
              <text class="font32 text1 mb4">{{T('人脸识别')}}</text>
              <text class="font24 text-hui">{{data.certContent.middleCert}}</text>
            </div>
          </div>
          <div class="line"></div>

          <div class="cell-bottom">
            <text class="font24 text-hui all mb4">{{T('条件：提供人脸识别')}}</text>

            <div class="but mr10" v-if="!data.middleCert" @click="httpGetUserCertx()">
              <text class="font26 text1">{{T('查询')}}</text>
            </div>
            <div v-if="data.middleCert" class="but">
              <text class="font26 text1">{{T('已认证')}}</text>
            </div>
            <div v-else class="but" @click="zjClick('klc/KlcOne')">
              <text class="font26 text1">{{T('去认证')}}</text>
              <LImage class="img-arrow" :src="Config.img('jiantou_hui.png')"></LImage>
            </div>
          </div>
        </div>

        <div class="cell" :style="{'background-image': 'linear-gradient(to right, #4C527E, #222649)'}">

          <div class="tag" :style="{'background-image': 'linear-gradient(to right, #FADABD, #F4C09C)'}">
            <text class="font20" :style="{'color':'#511111'}">{{T('高级认证')}}</text>
          </div> 

          <div class="all"></div>
          <div class="cell-top">
            <LImage class="img-head" :src="Config.img('shipin_icon.png')"></LImage>
            <div class="column all">
              <text class="font32 text1 mb4">{{T('视频认证')}}</text>
              <text class="font24 text-hui">{{data.certContent.seniorCert}}</text>
            </div>
          </div>
          <div class="line"></div>

          <div class="cell-bottom">
            <text class="font24 text-hui all mb4">{{T('条件：提供视频录像认证')}}</text>
            <div v-if="data.seniorCert" class="but">
              <text class="font26 text1">{{T('已认证')}}</text>
            </div>
            <div v-else class="but" @click="gjClick">
              <text class="font26 text1">{{T('去认证')}}</text>
              <LImage class="img-arrow" :src="Config.img('jiantou_hui.png')"></LImage>
            </div>
          </div>
        </div>
    </template>
  </scroller>
</template>


<script>

import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";

const weexFunction = weex.requireModule("WeexFunction");
import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("身份认证"));

export default {
  
  data() {
    return {
      T: T,
      Config: jconfig,

      data:undefined,

      isZj:false, //true正在进行中级认证
    };
  },

  created() {
    this.httpGetUserCert(true);
  },

  methods: {

    viewappear() {
      if (this.data) {
        this.httpGetUserCert();
      }

      if (this.isZj) {
        this.httpsGetVideoResult();
      }
    },

    /************************************* https */
    //https认证情况
    httpGetUserCert(hud){
      hud && jmodal.showLoad();
      var param = {};
      jhttps.post("certification/getUserCert",param,true,(data)=>{
        hud && jmodal.hideLoad();
        if(data.status == 200){
          this.data = data.data;
        }else{
          hud && jmodal.toast(data.msg);
        }
      });
    },

    //https认证情况
    httpGetUserCertx(back){

      jmodal.showLoad();
      var param = {};
      jhttps.post("certification/getUserCert",param,true,(data)=>{
        
        jmodal.hideLoad();
        if(data.status == 200){
          this.data = data.data;
          if (this.data.middleCert) {
            jmodal.toast('已认证');
          } else if (back) {
            back();
          } else {
            jmodal.toast('未认证');
          }
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //获取活体验证结果
    httpsGetVideoResult(){

      jmodal.showLoad();
      var param = {};
      jhttps.post("certification/getVideoResult",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;
          if (data.states == 'success') {
            jmodal.toast(T('中级认证成功'));
          } else {
            jmodal.toast(T('中级认证失败'));
          }
        } else if (data.status == 1240) {

        } else{
          jmodal.toast(data.msg);
        }
      });
    },

    /******************************** 点击 */
    //初级认证
    cjClick(){
      jnavigator.open('', 'klc/KlcOne');
    },

    //中级认证
    zjClick() {
      if (!this.data.juniorCert) {
            jmodal.toast(T('请先完成初级认证'));
        return;
      }

      this.httpGetUserCertx(()=>{
        weexFunction.gerBackUrl('/auth.html?token=', (returnUrl)=>{
          var param = {'returnUrl':returnUrl};
          jnavigator.openNative('HTML', {'navTitle':T('活体认证'), 'url':'/certification/getVideoCertParam', 'param':param});
          this.isZj = true;
        });
      })
    },

    //高级认证
    gjClick() {
      jmodal.toast(T('未开放'));
    }
  },
};
</script>


<style src="@/_css/style.css" ></style>
<style scoped>
.scroller {
  flex: 1;
  padding: 40px;
}
.cell {
  height: 310px;
  border-radius: 10px;

  padding: 0 40px;
  margin-bottom: 50px;
}
.tag {
  position: absolute;
  top: 20px;
  left: 0;
  
  flex-direction: row;
  align-items: center;
  height: 36px;
  
  border-radius: 0px 2px 4px 0px;
  padding: 0 30px 0 20px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 4px;
}

.cell-top {
  flex-direction: row;
  align-items: center;
  padding: 24px 0;
}
.img-head {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 30px;
}

.cell-bottom {
  flex-direction: row;
  align-items: center;
  padding: 20px 0 30px 0;
}
.but {
  flex-direction: row;
  align-items: center;
  height: 58px;
  background-color: #466DC4;
  border-radius: 10px;
  padding: 0 20px;
}
.img-arrow {
  width: 8px;
  height: 16px;
  margin-left: 16px;
}

.line {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.text-hui {
  color: #9BA9D0;
}
</style>